<template>
  <div>
    <van-row>
      <van-col span="24" class="title">
        <span style="color: white">浩物安全管理系统</span>
      </van-col>
    </van-row>
    <van-swipe
      class="my-swipe topMargin"
      :autoplay="3000"
      @change="onChange"
      style="height: 220px"
    >
      <van-swipe-item v-for="item in zdtp_list" :key="item.id">
        <van-image style="height: 100%; width: 100%" :src="item.url" />
        <!-- <img src="../../assets/images/news_dome.jpg" alt class="img" /> -->
      </van-swipe-item>
      <template #indicator>
        <div class="newsTitle">
          <span> {{ newsTitle }}</span>
          <!-- <span style="right: 0px">{{ current + 1 }}/4</span> -->
        </div>
      </template>
    </van-swipe>

    <van-row>
      <van-col span="24" class="bg_grey_height"></van-col>
    </van-row>
    <!-- 新闻公告 -->
    <van-row>
      <van-col span="24">
        <van-notice-bar
          color="#1989fa"
          background="#ffffff"
          left-icon="volume-o"
          :scrollable="false"
        >
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="2000"
            :show-indicators="false"
          >
            <van-swipe-item
              v-for="item in ptgg_list"
              :key="item.id"
              @click="showDetailInfo(item)"
              >{{ item.title }}</van-swipe-item
            >
          </van-swipe>
        </van-notice-bar>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24" class="bg_grey_height"></van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-cell title="最新资讯" style="font-weight: bold" />
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in xwzx_list"
            :key="item.id"
            @click="toContent(item)"
          >
            <div style="font-size: 16px">{{ item.title }}</div>
            <div style="color: #949494">
              {{ item.author + item.publish_time }}
            </div>
          </van-cell>
        </van-list>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <van-cell
          style="height: 40px; background-color: white"
          class="bg_grey"
        ></van-cell>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from "vant";
/**
 * 首页
 */
import { Api } from "../../api/api_config";
import { Dialog } from "vant";

export default {
  data() {
    return {
      current: 0,
      loading: false,
      finished: false,
      zdtp_list: [],
      zdtp_catalog_id: -1,
      ptgg_list: [],
      ptgg_catalog_id: -1,
      xwzx_list: [],
      xwzx_catalog_id: -1,
      page: 1,
      pageSize: 5,
      xwzx_page: 1,
      xwzx_pageSize: 5,
      xwzx_totalCount: 0,
      newsTitle: "",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // 获取分类ID

      this.getCatalogId();
    },
    onChange(index) {
      this.newsTitle = this.zdtp_list[index].title;
      this.current = index;
    },
    onLoad() {
      if (this.xwzx_catalog_id === -1) {
        return;
      }
      this.loading = true;
      this.xwzx_page = this.xwzx_page + 1;
      this.getArticleByCatalogId(
        "xwzx",
        this.xwzx_catalog_id,
        this.xwzx_page,
        this.xwzx_pageSize
      );
    },
    getCatalogId() {
      let that = this;
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.$axios({
        method: Api.articleCatalog.articleCatalog.method,
        url: Api.articleCatalog.articleCatalog.url,
      })
        .then(function (response) {
          response.data.forEach((element) => {
            switch (element.name) {
              case "平台公告":
                that.ptgg_catalog_id = element.id;
                break;
              case "新闻资讯":
                that.xwzx_catalog_id = element.id;
                break;
              case "置顶图片":
                that.zdtp_catalog_id = element.id;
                break;
              default:
                break;
            }
          });

          that.getFirstPage();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getFirstPage() {
      // 获取置顶图片
      this.getArticleByCatalogId(
        "zdtp",
        this.zdtp_catalog_id,
        this.page,
        this.pageSize
      );
      this.getArticleByCatalogId(
        "ptgg",
        this.ptgg_catalog_id,
        this.page,
        this.pageSize
      );
      this.getArticleByCatalogId(
        "xwzx",
        this.xwzx_catalog_id,
        this.xwzx_page,
        this.xwzx_pageSize
      );
    },
    getArticleByCatalogId(type, id, page, size) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let that = this;
      this.$axios({
        method: Api.Article.get_article.method,
        url:
          Api.Article.get_article.url +
          "?catalog_id=" +
          id +
          "&page=" +
          page +
          "&pagesize=" +
          size,
      })
        .then(function (response) {
          // console.log(response.data);
          switch (type) {
            case "zdtp":
              that.zdtp_list = response.data.items;
              break;
            case "ptgg":
              that.ptgg_list = response.data.items;
              break;
            case "xwzx":
              // that.xwzx_list = response.data.items;
              response.data.items.forEach((element) => {
                that.xwzx_list.push(element);
              });
              that.xwzx_totalCount = response.data.totalCount;
              that.loading = false;
              if (that.xwzx_list.length >= that.xwzx_totalCount) {
                that.finished = true;
              }
              break;
            default:
              break;
          }

          Toast.clear();
        })
        .catch(function (error) {
          console.log(error);
          Toast.clear();
        });
    },
    toContent(item) {
      this.$store.state.articleId = item.id;
      this.$router.push("/home/article");
    },
    showDetailInfo(item) {
      Dialog.alert({
        title: "平台公告",
        message: item.title,
        confirmButtonColor: '#243881'
      }).then(() => {
        // on close
      });
    },
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  height: 220px;
  width: 100%;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  padding-top: 10px;
}

.newsTitle {
  border-width: 0px;
  position: relative;
  bottom: 30px;
  width: 100%;
  height: 30px;
  background: inherit;
  background-color: rgba(36, 56, 129, 0.698039215686274);
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
  font-weight: 650;
  font-style: normal;
  font-size: 12px;
  color: #ffffff;
  text-align: left;
  padding-top: 10px;
  padding-left: 10px;
}

.img {
  width: 100%;
  height: 100%;
}

.text {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
